<template>
  <div class="cert-container" :style="{'background-image':bg}">
<!--    <div class="logo-wrapper">-->
<!--      <img src="../../../assets/images/detail/cert_logo.png" alt=""/>-->
<!--    </div>-->
<!--    <div class="cert-name">数据（商品）上架证书</div>-->
<!--    <div class="goods-name">{{ data.supplierName }}</div>-->
    <div class="goods-name">{{ data.goodsName }}</div>
    <div class="common-font1 MT50">已完成深圳数据交易所数据商品上市流程，<br/>可正式公开流通交易。</div>
<!--    <div class="common-font MT50">深圳数据交易所有限公司</div>-->
    <div class="common-font2 MT20" style="font-size: 16px;">有效期：{{ data.validDateStart }} - {{ data.validDateEnd }}</div>
    <div class="qr-wrapper MT20">
      <img src="../../../assets/images/detail/qr.png" alt=""/>
    </div>
    <div class="common-font MT20" style="font-size: 16px;">授予日期：{{ data.createDate }}</div>
    <div class="common-font" style="font-size: 16px;" v-if="data.goodsNo">证书编号：{{ data.goodsNo }}</div>
  </div>
</template>

<script>
import {queryCertificateInfo} from '@/api/goods'

export default {
  name: 'Certificate',
  props: {
    id: ''
  },
  data () {
    return {
      data: {},
      bg: 'url(' + require('../../../assets/images/detail/cert.png') + ')'
    }
  },
  mounted () {
    this.loadData()
  },
  watch:{
    id(val) {
      this.loadData()
    }
  },
  methods: {
    loadData () {
      queryCertificateInfo({goodsInfoId: this.id}).then(res => {
        if (res.code === 0) {
          this.data = res.data
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.cert-container {
  width: 500px;
  height: 707px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 40px 30px;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;

  img:first-child {
    width: 160px;
  }
}

.cert-name {
  color: #EAC443;
  font-size: 38px;
  text-align: center;
  margin: 40px 0;
  font-weight: bold;
  font-family: STKaiti, KaiTi, sans-serif;
}

.goods-name {
  font-size: 24px;
  font-family: Source Han Sans CN,Microsoft YaHei;
  line-height: 2em;
  margin-top: 40%;
  margin-bottom: 10px;
  text-align: center;
  color: black;
  font-weight: 900;
}

.common-font {
  font-family: Source Han Sans CN,Microsoft YaHei;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  color: black;
}

.common-font1 {
  font-family: Source Han Sans CN,Microsoft YaHei;
  font-size: 16px;
  margin-top: 45px;
  line-height: 26px;
  text-align: center;
  color: black;
}

.common-font2 {
  font-family: Source Han Sans CN,Microsoft YaHei;
  font-size: 16px;
  margin-top: 45px;
  line-height: 26px;
  text-align: center;
  color: black;
}

.qr-wrapper {
  text-align: center;

  img {
    width: 70px;
    height: 70px;
  }
}
</style>
